<template>
  <article class="podcast" v-if="hackReset">
    <section class="full-page" ref="podcastIndex">
      <div class="head">
        <div class="header">
          <div @click="back()" class="back"><span class="arrow"></span></div>

          <ul class="menu dy-menu">
            <li
              v-for="(item, index) in menuList"
              :key="index"
              @click="clickMenu(item, index)"
              @dblclick="refreshItem(item, index)"
              :class="{ active: currentIndex == index }"
            >
              <span>{{ item.name }}</span>
            </li>
          </ul>

          <div class="btn" @click="goSearch">
            <div class="inner">
              <img
                src="../../../../../static/images/dangjian/home/icon-search-fff.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <waterLogo :content="content" v-if="!isLoading && playerList.length === 0"></waterLogo>
      <cube-slide
        ref="slide"
        :loop="loop"
        :initial-index="2"
        :auto-play="autoPlay"
        :show-dots="showDots"
        :options="slideOptions"
        @change="changePage"
        v-if="menuList.length > 0"
      >
        <fetchData
          class="detail"
          :loading="isLoading"
          :data="menuList"
        ></fetchData>
        <cube-slide-item>
          <videoList
            key="-1"
            useType="quyu"
            keyword=""
            menuId=""
          ></videoList>
        </cube-slide-item>
        <cube-slide-item v-for="(item, index) in playerList" :key="index">
          <playerOne
            :ref="'playerOne_'+index"
            :key="index"
            :menuId="item.id"
            :selfIndex="index+1"
            :currentIndex="currentIndex"
          ></playerOne>
        </cube-slide-item>
        <!-- 活动（跟党工委相同展示模式） -->
        <cube-slide-item v-for="(item, index) in activityList" :key="index+10">
          <videoList
            :key="index+10"
            useType="huodong"
            keyword=""
            :menuId="item.id"
          ></videoList>
        </cube-slide-item>
      </cube-slide>
    </section>
  </article>
</template>

<script>
import playerOne from "./playerOne.vue";
import videoList from "./videoList.vue";
import $ from "../../../../../static/js/jquery-1.12.4.min";
import _ from "lodash";
var time = null;  //  在这里定义time 为null
export default {
  components: { playerOne,videoList },
  name: "podcast",
  data() {
    return {
      menuList: [
        {
          name: "党工委",
          id: "1",
        },
        {
          name: "关注",
          id: "2",
        },
        {
          name: "推荐",
          id: "3",
        },
      ],
      playerList: [
        {
          name: "关注",
          id: "2",
        },
        {
          name: "推荐",
          id: "3",
        }
      ], // 直接滑动
      activityList: [], //活动（跟党工委相同展示模式）
      currentIndex: 2,
      slideOptions: {
        listenScroll: true,
        probeType: 3,
        directionLockThreshold: 0,
      },
      scrollOptions: {
        directionLockThreshold: 0,
      },
      loop: false,
      autoPlay: false,
      showDots: false,
      content:'暂无视频作品',
      isLoading: true,
      hackReset: true,
    };
  },
  watch: {
    currentIndex(newVal) {
      this.$nextTick(() => {
        this.$refs.slide &&
          this.$refs.slide.slide &&
          this.$refs.slide.slide.goToPage(newVal, 0, 300);

        var menuW = $(".dy-menu").width();
        var tabLen = this.menuList.length;
        var activeDom = $(".dy-menu").children(".active");
        var activeL = activeDom.offset().left;
        var activeW = activeDom.outerWidth();

        if (newVal<2) {
          $(".dy-menu").animate({scrollLeft: 0}, 500);
        }else if (newVal>=tabLen-2 && tabLen > 4) {
          $(".dy-menu").animate({scrollLeft: activeW * tabLen}, 300);
        }else{
          $(".dy-menu").animate({scrollLeft: activeW * (newVal - 2)}, 300);
        }
      });
    },
  },
  created() {
    console.log("podcast created");
    this.hackReset = true;
    this.menuList = this.menuList.concat(this.$store.state.currentTopData.menuList);
    this.activityList = this.$store.state.currentTopData.menuList; //活动列表
  },
  mounted() {
  },
  activated() {
    console.log("podcast activated");
    this.hackReset = true;
  },
  beforeDestroy(){
    clearTimeout(time);
  },
  beforeRouteLeave(to, from, next) {
    this.$route.meta.keepAlive = to.name !== 'home'
    if(this.$route.meta.keepAlive) {
      this.$store.commit('addRoute','podcast')
    }else {
      this.hackReset = false;
      this.$store.commit('removeRoute','podcast')
      this.$destroy()
    }
    next();
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.name === "home") {
        to.meta.keepAlive = false;
        vm.$store.commit("removeRoute", "podcast");
      }
      if (from.name !== "home"){
        to.meta.keepAlive = true;
        vm.$store.commit('addRoute','podcast')
      }
    });
  },
  methods: {
    /*左右滑动事件*/
    changePage(current) {
      this.currentIndex = current;
    },
    // 顶部tab点击
    clickMenu(item, index) {
      clearTimeout(time);  //首先清除计时器
      time = setTimeout(() => {
        this.currentIndex = index;
      }, 300);   //大概时间300ms
    },
    // 顶部tab双击
    refreshItem(item, index) {
      clearTimeout(time);  //清除
      if (this.currentIndex == index) {
        var num = index - 1;
        this.$nextTick(()=>{
            this.$refs['playerOne_' + num][0].init();
        })
      }
    },
    // 返回
    back() {
      this.tools.back();
    },
    // 跳转搜索页
    goSearch(){
      this.$router.push({path: "/podcastSearch"});
      this.$store.state.needRefreshPodcast = false; //返回不需要刷新
    },
    /*跳转到对应tab*/
    switchTab(index) {
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.slide.slide &&
            this.$refs.slide.slide.goToPage(index, 0, 300);
        }, 0);
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
</style>

